<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no;email=no" name="format-detection">
    <title>我的报名</title>

    <script src="../../../static/js/lib/flexible_css.debug.js"></script>
    <script src="../../../static/js/lib/flexible.debug.js"></script>

    <link rel="stylesheet" href="../../../static/css/public.css">
    <link rel="stylesheet" href="../../../static/css/lib/weui.min.css">
    <link rel="stylesheet" href="../../../static/css/plugin/jquery-weui.min.css">
    <link rel="stylesheet" href="../../../static/css/plugin/iconfont.css">
    <link rel="stylesheet" href="../../../static/css/mallui.min.css">

    <link rel="stylesheet" href="../../../static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="../../../static/css/lib/main.css">
    <link rel="stylesheet" href="../../../static/css/module/dropload.css">
    <link rel="stylesheet" href="../../../static/css/module/header.css">
    <link rel="stylesheet" href="../../../static/css/module/footer.css">
    <link rel="stylesheet" href="../../../static/css/page/apply.css">
</head>
<body>
<div class="wrapper">
    <!-- 头部 -->
    <header class="hidden-xs">
        <nav class="mainnav">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                        <ul class="nav nav-pills topnav" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a href="#">作品展示</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">楚才书店</a>
                            </li>
                            <li class="logo-item">
                                <img src="../../../static/images/logo.png" width="105" height="104" alt="logo">
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">个人中心</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">登录/注册</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div class="swiper-container mallui_banner_home" style="display: none">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../../../static/images/banner_mall.png" alt=""></div>
            <div class="swiper-slide"><img src="../../../static/images/banner_mall.png" alt=""></div>
            <div class="swiper-slide"><img src="../../../static/images/banner_mall.png" alt=""></div>
            <div class="swiper-slide"><img src="../../../static/images/banner_mall.png" alt=""></div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
        </div>
    </div>

    <!-- 正文内容 -->
    <div class="container">

        <div class="main-content">
            <div class="apply" id="applyList">
                <h1 class="main-title"><span>我的报名</span></h1>
                <div class="lists">
                    <div class="row activity">
                        <div class="activity-item activity-item--apply activity-item--list">
                            <div class="activity-item_hd">
                                <span class="pull-right apply-status">报名成功</span>
                                参赛证号：10060001
                            </div>
                            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                                <div class="media">
                                    <a class="media-left" href="#">
                                        <img src="../../../static/images/activity.png" width="130" height="130" alt="activity">
                                    </a>
                                    <div class="media-body">
                                        <div class="clearfix">
                                            <span class="pull-right apply-price">¥20</span>
                                            <h4 class="media-heading">首届“楚才马克杯”作文选拔赛报名活动</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row activity">
                        <div class="activity-item activity-item--apply activity-item--list">
                            <div class="activity-item_hd">
                                <span class="pull-right apply-status">已报名,未缴费</span>
                                参赛证号：10060001
                            </div>
                            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                                <div class="media">
                                    <a class="media-left" href="#">
                                        <img src="../../../static/images/activity.png" width="130" height="130" alt="activity">
                                    </a>
                                    <div class="media-body">
                                        <div class="clearfix">
                                            <span class="pull-right apply-price">¥20</span>
                                            <h4 class="media-heading">首届“楚才马克杯”作文选拔赛报名活动</h4>
                                        </div>
                                        <div class="option">
                                            <button class="btn option__btn option__btn--modify" type="button">修改考生信息</button>
                                            <button class="btn option__btn option__btn--cost" type="button">去缴费</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="logo-bottom visible-xs text-center">
                <img src="../../../static/images/bluelogo_cjrb.png" width="136" height="42" alt="cjrbLogo">
            </div>
            <span class="star"><img src="../../../static/images/star.png" alt="star"></span>
            <span class="child"><img src="../../../static/images/child.png" alt="child"></span>
            <span class="planet visible-xs"><img src="../../../static/images/planet.png" alt="planet"></span>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer class="hidden-xs">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                版权所有 武汉楚才竞赛网 鄂ICP备14016248号COPYRIGHT @2013-2014 CHUCAI.GNJ.CN ALL RIGHT RESERVED
                <img src="../../../static/images/logo_cjrb.png" width="136" height="42" alt="cjrbLogo">
            </div>
        </div>
    </div>
</footer>

<script src="../../../static/js/lib/jquery-1.9.1.min.js"></script>
<script src="../../../static/js/lib/bootstrap.min.js"></script>
<script src="../../../static/js/plugin/jquery-weui.min.js"></script>
<script src="../../../static/js/plugin/swiper.min.js"></script>
<!--<script src="../../../static/js/module/dropload.min.js"></script>-->
<script>
    $(function(){
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false
        });

        // 页数
        var page = 0;
        // 每页展示5个
        var size = 5;

        // dropload
        $('#applyList').dropload({
            scrollArea : window,
            loadDownFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result += '<div class="row activity">'
                                    +'<div class="activity-item activity-item--apply activity-item--list">'
                                    +'<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">'
                                    +'<div class="media">'
                                    +'<a class="media-left" href="#">'
                                    +'<img src="../../../static/images/activity.png" width="130" height="130" alt="activity">'
                                    +'</a>'
                                    +'<div class="media-body">'
                                    +'<h4 class="media-heading">首届“楚才马克杯”作文选拔赛报名活动</h4>'
                                    +'<p class="activity-price">¥20</p>'
                                    +'<p class="activity-number">参赛证号：10060001</p>'
                                    +'</div>'
                                    +'</div>'
                                    +'</div>'
                                    +'<span class="pay-status"><img src="../../../static/images/payed.png" alt="payed"></span>'
                                    +'</div>'
                                    +'</div>';
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('.lists').append(result);
                            // 每次数据插入，必须重置
                            me.resetload();
                        }, 1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    });
</script>
</body>
</html>